<template>
  <div class="page-container">
    <div class="page-header">
      <button class="back-button" @click="goToHome">
        <span class="icon-arrow-left"></span>
        返回首页
      </button>
      <h1>员工绩效分析</h1>
      <p>评估和比较员工工单处理表现</p>
    </div>
    
    <div class="filters">
      <div class="filter-group">
        <label>时间范围</label>
        <select v-model="timeRange">
          <option value="week">本周</option>
          <option value="month">本月</option>
          <option value="quarter">本季度</option>
          <option value="year">本年</option>
        </select>
      </div>
      <div class="filter-group">
        <label>部门</label>
        <select v-model="department">
          <option value="all">全部部门</option>
          <option value="support">技术支持</option>
          <option value="network">网络维护</option>
          <option value="hardware">硬件支持</option>
        </select>
      </div>
    </div>
    
    <div class="performance-grid">
      <div class="performance-card">
        <h2>员工处理效率排名</h2>
        <div class="ranking-list">
          <div class="ranking-item" v-for="(emp, index) in topEmployees" :key="emp.id">
            <div class="rank">{{ index + 1 }}</div>
            <div class="emp-info">
              <div class="emp-name">{{ emp.name }}</div>
              <div class="emp-dept">{{ emp.dept }}</div>
            </div>
            <div class="emp-stats">
              <div class="stat">工单: {{ emp.tickets }}</div>
              <div class="stat">平均时间: {{ emp.avgTime }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="performance-card">
        <h2>绩效分布</h2>
        <div class="chart-container" ref="distributionChart" style="height: 300px;"></div>
      </div>
    </div>
    
    <div class="performance-card full-width">
      <h2>员工绩效趋势</h2>
      <div class="chart-container" ref="trendChart" style="height: 300px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EmployeePerformance',
  data() {
    return {
      timeRange: 'month',
      department: 'all',
      topEmployees: [
        { id: 1, name: '张三', dept: '技术支持', tickets: 48, avgTime: '2.3小时' },
        { id: 2, name: '李四', dept: '网络维护', tickets: 36, avgTime: '3.1小时' },
        { id: 3, name: '王五', dept: '硬件支持', tickets: 32, avgTime: '4.5小时' },
        { id: 4, name: '赵六', dept: '技术支持', tickets: 29, avgTime: '2.8小时' },
        { id: 5, name: '钱七', dept: '网络维护', tickets: 25, avgTime: '3.5小时' }
      ],
      distributionChart: null,
      trendChart: null
    };
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    initCharts() {
      // 初始化绩效分布图表（饼图）
      this.distributionChart = echarts.init(this.$refs.distributionChart);
      this.distributionChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['优秀', '良好', '一般', '需改进']
        },
        series: [
          {
            name: '绩效分布',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 15, name: '优秀' },
              { value: 35, name: '良好' },
              { value: 30, name: '一般' },
              { value: 20, name: '需改进' }
            ]
          }
        ]
      });

      // 初始化绩效趋势图表（折线图）
      this.trendChart = echarts.init(this.$refs.trendChart);
      this.trendChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均处理时间', '工单完成量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: [
          {
            type: 'value',
            name: '时间(小时)',
            min: 0,
            position: 'left'
          },
          {
            type: 'value',
            name: '工单数',
            min: 0,
            position: 'right'
          }
        ],
        series: [
          {
            name: '平均处理时间',
            type: 'line',
            yAxisIndex: 0,
            data: [3.5, 2.8, 4.0, 3.2, 2.5, 2.0, 3.8],
            smooth: true,
            lineStyle: {
              width: 3
            }
          },
          {
            name: '工单完成量',
            type: 'line',
            yAxisIndex: 1,
            data: [25, 30, 22, 28, 36, 20, 24],
            smooth: true,
            lineStyle: {
              width: 3
            }
          }
        ]
      });
    },
    resizeCharts() {
      if (this.distributionChart) {
        this.distributionChart.resize();
      }
      if (this.trendChart) {
        this.trendChart.resize();
      }
    }
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeUnmount() {
    if (this.distributionChart) {
      this.distributionChart.dispose();
    }
    if (this.trendChart) {
      this.trendChart.dispose();
    }
    window.removeEventListener('resize', this.resizeCharts);
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-group label {
  margin-bottom: 8px;
  font-weight: 500;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 5px;
  min-width: 150px;
}

.performance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.performance-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.full-width {
  grid-column: 1 / -1;
}

.performance-card h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
  transition: background-color 0.3s;
}

.ranking-item:hover {
  background-color: #f0f4f8;
}

.rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
}

.emp-info {
  flex: 1;
}

.emp-name {
  font-weight: 500;
}

.emp-dept {
  font-size: 12px;
  color: #666;
}

.emp-stats {
  text-align: right;
}

.stat {
  font-size: 13px;
  color: #555;
}

.chart-container {
  width: 100%;
}
</style>